<template>
  <div class="BoardView">
    <div v-for="item in data" :key="item.field">
      <DargBox :item="item" />
    </div>
  </div>
</template>

<script setup>
import uniqueId from "../Util/unique.js";
import DargBox from "./DargBox.vue";
import { ref, provide } from "vue";

const ActiveId = ref(null);
const SetActiveId = function (id) {
  ActiveId.value = id;
};

const DargState = ref(false);
const SetDargState = function (State) {
  DargState.value = State;
};

provide("DargState", DargState);
provide("SetDargState", SetDargState);
provide("ActiveId", ActiveId);
provide("SetActiveId", SetActiveId);

const data = ref([
  {
    field: uniqueId(),
    type: "LayoutRow",
    props: {
      content: "ASD",
    },
    style: {},
    slots: {
      default: [
        {
          field: uniqueId(),
          type: "LayoutRow",
          props: {
            content: "ASD1",
          },
          style: {},
          slots: {
            default: [],
          },
        },
      ],
    },
  },
  {
    field: uniqueId(),
    type: "LayoutRow",
    props: {
      content: "ZXC",
    },
    style: {},
    slots: {
      default: [
        {
          field: uniqueId(),
          type: "LayoutRow",
          props: {
            content: "ASD2",
          },
          style: {},
          slots: {
            default: [],
          },
        },
      ],
    },
  },
  {
    field: uniqueId(),
    type: "LayoutRow",
    props: {
      content: "CCC",
    },
    style: {},
    slots: {
      default: [
        {
          field: uniqueId(),
          type: "LayoutRow",
          props: {
            content: "ASD3",
          },
          style: {},
          slots: {
            default: [],
          },
        },
      ],
    },
  },
]);
const DataMapping = {};

// console.log(data.value);
</script>

<style lang="less" scoped>
.BoardView {
  user-select: none;
  position: absolute;
  height: 100%;
  left: 300px;
  right: 300px;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom: none;
}
</style>